<script setup>
    import { ref, defineProps, computed } from 'vue';
    import commonPage from '@/components/CommonPage.vue';
    const props = defineProps({
        table: Object
    });
    // const table = ref({
    //     hasPage: true,
    //     tableColumn: { 
    //         shopProduct: { type: "text", text: "金融产品" }
    //     },
    //     tableData: [
    //         { shopProduct: "乐E付存量" },
    //     ],
    //     click: row => {
    //         dialogStore.displayTrue();
    //     }
    // })
    const pageData = ref({
        total: props?.table?.tableData?.length,
        page: 1,
        pageSize: 10
    });
    const changePage = page => {
        pageData.value.page = page;
    };
    const showTabel = ref({
        tableColumn: props?.table?.tableColumn || {},
        tableData: computed(() => {
            return props?.table?.tableData.slice( pageData.value.page * pageData.value.pageSize - pageData.value.pageSize, pageData.value.page * pageData.value.pageSize)
        })
    });
    
    
</script>
<template>
    <div class="container">
        <el-table :data="showTabel?.tableData" border :header-cell-style="{  textAlign: 'center', backgroundColor: 'rgb(250, 250, 250)', color: 'rgba(0, 0, 0, 0.85)', fontSize: '12px', fontWeight: 'normal' }">
            <el-table-column v-for="(value, key, index) in showTabel?.tableColumn" :key="index" :label="value.text" :width="value.width">
                <template #default="scope">
                    <div class="center" v-if="value.type==='button'">
                        <el-button @click="table.click(scope.row)" type="text" size="small">{{ value.text }}</el-button>
                    </div>
                    <div class="center" v-else>
                        {{ scope.row[key] }}
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <common-page v-if="props?.table?.hasPage" :pageData="pageData" @changePage="changePage"></common-page>
    </div>
</template>
<style lang="scss" scoped>
.container {
    background-color: white;
    .center {
        display: flex;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
    }
}
</style>